import * as webpack from "webpack";
import * as path from "path";
import MiniCSSText from "mini-css-extract-plugin";
import UglyJS from "uglifyjs-webpack-plugin";
import HTMLTpl from "html-webpack-plugin";
import OptimizeCSS from "optimize-css-assets-webpack-plugin";

const projectName = "line";
const srcCodeFolder = path.join(__dirname, `src/${projectName}`);
const srcCodeEntry = path.join(srcCodeFolder, `entry`);

const config: webpack.Configuration = {
    mode: "development",
    devtool: "source-map",
    output: {
        filename: "[name].js",
        path: path.join(__dirname, `dist/${projectName}/src`),
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    "style-loader",
                    // "autoprefixer-loader",
                    MiniCSSText.loader,
                    "css-loader",
                    "postcss-loader",
                    "sass-loader"
                ],
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    // "autoprefixer-loader",
                    MiniCSSText.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ],
            },
            {
                test: /\.ts$/,
                use: [
                    "ts-loader"
                ],
            },
            {
                test: /\.(png|jpg|jpeg)$/,
                use: [
                    {
                        loader: "file-loader",
                        options: {
                            name: "[name].[ext]",
                            outputPath(url: string, resourcePath: string, context: string) {
                                const srcPath = path.join(srcCodeFolder, "assets");
                                const relative = path.relative(srcPath, resourcePath);
                                return relative;
                            },
                            publicPath(url: string, resourcePath: string, context: string) {
                                const relative = path.relative(path.join(srcCodeFolder, "assets"), resourcePath).replace(/\\/g, "/");
                                const dir = path.join("/src", relative.replace(/^\./, "")).replace(/\\/g, "/");
                                return `"${dir}"`;
                            },
                        },
                    }
                ],
            },
        ],
    },
    plugins: [
        new MiniCSSText({
            filename: "[name].css",
        }),
        new OptimizeCSS(),
        new UglyJS({
            uglifyOptions: {
                compress: {
                    drop_debugger: false,
                    drop_console: false,
                },
            }
        }),
        new HTMLTpl(),
    ],
    target: "web",
    resolve: {
        extensions: [".ts", ".scss", ".less", ".es6", ".css", ".js"],
        alias: {
            "@": path.join(__dirname, "./"),
        },
    },
    watch: false,
    devServer: {
        contentBase: path.join(__dirname, `dist/${projectName}`),
        compress: true,
        port: 9000,
        hot: true,
    },
};

export default config;
